<template>
  <el-container>
    <el-header>
      <div class="header">
        <div class="title">企业名称：{{companyName}}</div>
      </div>
      <div class>
        <el-button type="primary" class="btn" @click="addServes">服务单新增</el-button>
        <el-button type="primary" class="btn" @click="outerVisible = true">服务单导入</el-button>
        <a href="http://cdn.tianyalei.com/youplus/sample.csv" download="服务单导入模版.cvs">服务单导入模版</a>
      </div>
    </el-header>
    <el-main>
      <el-table :data="servesInfoList">
        <el-table-column prop="id" align="center" label="服务单ID"></el-table-column>
        <el-table-column prop="userName" align="center" label="被服务人姓名"></el-table-column>
        <el-table-column prop="mobile" align="center" label="被服务人电话" width="120"></el-table-column>
        <el-table-column prop="relationUserName" align="center" label="关联权益人"></el-table-column>
        <el-table-column prop="goodsName" align="center" label="所属商品"></el-table-column>
        <el-table-column prop="beginTimeValue" align="center" label="生效起期" width="120"></el-table-column>
        <el-table-column prop="endTimeValue" align="center" label="生效止期" width="120"></el-table-column>
        <el-table-column prop="statusValue" align="center" label="生效状态"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demonstration-box">
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
    </el-main>
    <delete-info :id="deleteId" :isShowDelete="isShowDelete"></delete-info>
    <el-dialog title="服务单导入" :visible.sync="outerVisible">
      <el-main v-loading="loading">
        <div class="import">
          <span>商品列表：</span>
          <el-select v-model="goodsId" class="com-input" placeholder="全部">
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <span class="red" v-if="goodsList.length < 1">请先新建商品</span>
          <div class="file" v-if="goodsId">
            <label for="textFile">导入文件：</label>
            <input type="file" id="textFile" class="com-input" @change="confirm2import">
            <div style="margin-top: 20px; text-align: center">
              <el-button @click="confirm">提交</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-dialog>
  </el-container>
</template>
<script>
const queryString = require("querystring");
import page from "data/page";
import { getGoods } from "data/listBody";
import queryList from "utils/queryList";
import deleteInfo from "components/deleteInfo";
export default {
  name: "servesList",
  mixins: [page],
  data() {
    return {
      companyName: this.$route.query.companyName,
      id: this.$route.query.id,
      servesInfoList: [],
      goodsList: [],
      goodsId: "",
      loading: false,
      outerVisible: false,
      currentPage: 1,
      deleteId: "",
      isShowDelete: false,
      files: ""
    };
  },
  components: {
    deleteInfo
  },
  created() {
    this.dataInit();
    this.search();
  },
  methods: {
    dataInit() {
      getGoods(this.id, item => {
        this.goodsList = item.list;
      });
    },
    confirm2import(e) {
      this.files = e.target.files[0];
    },
    confirm() {
      if (!this.files) {
        this.$message("上传文件不能为空！");
        return;
      }
      this.$confirm("请确认是否上传", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.importServes();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    importServes() {
      this.loading = true;
      // this.files = e.target.files[0];
      var form = new FormData(); // FormData 对象
      form.append("file", this.files); // 文件对象
      form.append("goodsId", this.goodsId); // 文件对象
      this.api
        .post("/order/import", form)
        .then(res => {
          this.loading = false;
          this.search();
          this.$message(res.data);
          this.outerVisible = false;
        })
        .catch(err => {
          this.loading = false;
          this.$message(err.statusText);
        });
    },
    addServes() {
      this.$router.push(
        "addOrEditServe?type=add" +
          "&companyName=" +
          this.companyName +
          "&companyId=" +
          this.id
      );
    },
    edit(item) {
      this.$router.push(
        "addOrEditServe?type=edit&id=" +
          item.id +
          "&companyName=" +
          this.companyName +
          "&companyId=" +
          this.id
      );
    },
    del(item) {
      this.isShowDelete = true;
      this.deleteId = item.id;
    },
    getStatusValue(val) {
      let value = "";
      val = String(val);
      switch (
        val // -1待审核，0正常，-2被拒绝
      ) {
        case "-1":
          value = "待审核";
          break;
        case "0":
          value = "正常";
          break;
        case "-2":
          value = "被拒绝";
          break;
        default:
          value = val;
          break;
      }
      return value;
    },
    search() {
      const param = {
        companyId: this.id,
        page: this.currentPage - 1,
        size: 20
      };
      this.axios
        .get("/order?" + queryString.stringify(param))
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.servesInfoList = res.data.data.list;
            this.servesInfoList.forEach((servesInfo, index) => {
              this.servesInfoList[index].beginTimeValue =
                servesInfo.beginTime &&
                this.timeFormater(servesInfo.beginTime).format("YYYY-MM-DD");
              this.servesInfoList[index].endTimeValue =
                servesInfo.endTime &&
                this.timeFormater(servesInfo.endTime).format("YYYY-MM-DD");
              this.servesInfoList[index].statusValue = this.getStatusValue(
                String(servesInfo.status)
              );
            });
            this.setPage(res.data.data);
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.el-header {
  height: inherit !important;
}
.el-main {
  padding: 0;
}
.header {
  text-align: left;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.file {
  position: relative;
  margin-top: 20px;
  margin-left: 0;
  .serverInput {
    display: none;
  }
}
.com-input {
  width: 210px;
  margin-right: 20px;
}
.red {
  font-size: 12px;
  color: red;
}
.btn {
  margin-right: 10px;
  margin-top: 10px;
}
</style>

